<template>
  <!--  <h2>离线接收记录</h2>-->
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm"  :inline="true" v-show="showSearch">
      <el-form-item label="移交单位" prop="yjUnit">
        <el-input v-model="queryParams.yjUnit" placeholder="请输入移交单位" clearable style="width: 240px"
                  @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="接收单位" prop="jsUnit">
        <el-input v-model="queryParams.jsUnit" placeholder="请输入接收单位" clearable style="width: 240px"
                  @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search"  @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8" ref="refbut">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-upload2"  @click="handleImport">导入数据包</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table ref="table" v-loading="loading" :data="dataList" border :height="tableHeight" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column label="序号" type="index" :index="table_index" width="55" align="center" prop="id"/>
      <el-table-column label="批次号" prop="id" align="center" :show-overflow-tooltip="true" />
      <el-table-column label="数据包路径" prop="filePath" align="center" :show-overflow-tooltip="true" />
      <el-table-column label="移交单位" prop="yjUnit" align="center" :show-overflow-tooltip="true" />
      <el-table-column label="移交时间" prop="createTime" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{ formatDate(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="接收单位" prop="jsUnit" align="center" :show-overflow-tooltip="true" />
      <el-table-column label="接收时间" prop="receptionTime" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{ formatDate(scope.row.receptionTime) }}
        </template>
      </el-table-column>
      <el-table-column label="四性检测结果" prop="siXingResult" align="center" :show-overflow-tooltip="true" />
      <el-table-column label="操作" align="center" width="300">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="查看移交接收单" placement="top-start">
            <el-button icon="el-icon-view" plain  circle size="small" @click="onClick(0, scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="四性检测" placement="bottom-start" v-show="scope.row.siXingResult!='通过'">
            <el-button type="warning" icon="el-icon-finished" plain  circle size="small" @click="onClick(1, scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="发起接收审批" placement="top-start" v-show="scope.row.siXingResult=='通过'">
            <el-button type="primary" icon="el-icon-s-check" plain  circle size="small" @click="onClick(2, scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="bottom-start" v-show="scope.row.state==0">
            <el-button type="danger" icon="el-icon-delete" plain  circle size="small" @click="onClick(3, scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="打印四性检测报告" placement="bottom-start" v-show="scope.row.siXingResult!=null">
            <el-button type="success" icon="el-icon-printer" plain circle size="small" @click="onClick(4, scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="下载四性检测报告" placement="top-start" v-show="scope.row.siXingResult!=null">
            <el-button type="info" icon="el-icon-download" plain  circle size="small" @click="onClick(5, scope.row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

    <el-dialog title="请选择" :visible.sync="dialogVisible" width="28%" :before-close="closeDelDialog"
               :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="门类" prop="categoryId">
          <!-- <el-select v-model="form.categoryId" placeholder="请选择" style="width:100%" @change="handleChange">
            <el-option v-for="item in categoryIdOption" :key="item.value" :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select> -->
          <treeselect v-model="form.categoryId" :options="categoryIdOption" label placeholder="请选择" @select="handleChange"/>
        </el-form-item>
        <el-form-item label="四性方案" prop="code">
          <el-select v-model="form.code" placeholder="请选择" style="width:100%">
            <el-option v-for="item in sxjcList" :key="item.identification" :label="item.identification"
                       :value="item.identification">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleYes">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 方案明细 -->
    <!-- 四性方案 isShow: '1', 四性记录 isShow: '2' -->
    <PlanDetail v-if="planOpen" :open="planOpen" :title="planTitle" ref="planRef" :isShow="'2'" @planCancelTap="closeDelDialog"></PlanDetail>

    <!-- 打印四性检测报告弹出窗 -->
    <printSxjc v-if="printSXJCOpen" :open="printSXJCOpen" @closeDelDialog="closeDelDialog" :sxjcId="sxjcId">
    </printSxjc>

    <!-- 导入数据包 -->
    <ImportData :open="importOpen" @closeDelDialog="closeDelDialog" ref="importRef"></ImportData>

    <!-- 查看移交单 -->
    <Handover v-if="handoverRow" :open="handoverOpen" @closeDelDialog="closeDelDialog" :handoverRow="handoverRow"></Handover>
  </div>
</template>

<script>
import estimateTableHeight from '@/mixins/estimateTableHeight';
import Handover from "@/views/archive/digitalizeReceive/electronicArchives/onlineReceivingRecords/handover";
import ImportData from "@/views/archive/digitalizeReceive/electronicArchives/offlineReceivingRecords/importData";
import PlanDetail from "@/views/archive/fourNatures/detectionPlan/planDetail";
import { getTableList, deletePackage } from "@/api/archive/digitalizeReceive/electronicArchives/offlineReceivingRecords";
import {getcategory} from "@/api/archive/statistics/customizeStatistics/customizeStatistics";
import {getdetectionSchemeList} from "@/api/archive/archiveTransfer/archiveTransfer";
import {fqjssp, saveArchive} from "@/api/archive/digitalizeReceive/electronicArchives/onlineReceivingRecords";
import {getRecordsDetail} from "@/api/archive/fourNatures/detectionRecords";
import printSxjc from "@/views/archive/archiveTransfer/offline/printsxjc";
import {listGROUPTree} from "@/api/archive/archivesCategory.js";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "index",
  mixins: [estimateTableHeight], // 混入方法
  components: { ImportData, Handover, PlanDetail, printSxjc,Treeselect },
  data() {
    return {
      loading: true,
      dataList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        state: 0,
        type: 'outLine',
        yjUnit: undefined,
        jsUnit: undefined
      },
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      handoverOpen: false,  // 查看移交单
      handoverRow: "", // 查看移交单获取的数据
      importOpen: false, // 导入数据包
      dialogVisible: false, //门类弹窗
      categoryIdOption: [],
      sxjcList: [],//四性检测方案列表数据
      form: {
        categoryId: undefined,
        code: undefined
      },
      rules: {
        categoryId: [
          { required: true, message: "请选择门类", trigger: 'blur'  },
        ],
        code: [
          { required: true, message: "请选择四性方案", trigger: 'blur'  }
        ]
      },
      // 方案明细弹窗
      planOpen: false,
      planTitle: '检测详情',
      info: [],
      printSXJCOpen: false, //打印四性检测弹出层
      sxjcId:"", //获取列表的检测ID
      // 显示搜索条件
      showSearch: true,
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    formatDate(date) {
      if (!date) return '';
      const newDate = new Date(date);
      const year = newDate.getFullYear();
      const month = (newDate.getMonth() + 1).toString().padStart(2, '0');
      const day = newDate.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    table_index(index){
      return (this.queryParams.pageNum-1) * this.queryParams.pageSize + index + 1;
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.ztlxId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    getList() {
      getTableList(this.queryParams).then(res=>{
        this.loading = false
        this.dataList = res.rows
        this.total = res.total
      })
    },
    handleImport() {
      this.importOpen = true
      this.$nextTick(() => {
        this.$refs.importRef.init()
      })
    },
    onClick(val, row) {
      console.log(row,"-------------------")
      // 查看移交接收单
      if (val == 0) {
        this.handoverRow = row;
        this.handoverOpen = true;
      }
      // 四性检测
      if (val == 1) {
        this.form.id = row.id
        this.form.link = '1'
           //门类树
           listGROUPTree().then(response => {
          this.categoryIdOption= response.data;
          this.dialogVisible = true
          console.log(this.categoryIdOption,"99999999999999999999999999")
      });
      }
      // 发起接收审批
      if (val == 2) {
        fqjssp({
          ids: row.id
        }).then(res=>{
          this.$modal.msgSuccess('发起审批成功')
          this.getList()
        })
      }
      // 删除
      if (val == 3) {
        this.$modal.confirm('是否确认删除？').then(function () {
          return deletePackage(row.id)
        }).then(response => {
          this.getList();
          this.$modal.msgSuccess(response.msg);
        }).catch(() => {});
      }
      // 打印四性检测报告
      if (val == 4) {
        this.printSXJCOpen=true;
        this.sxjcId=row.siXingId
      }
      // 下载四性检测报告
      if (val == 5) {
        this.download('/archive/inspectionRecords/xmlExport',{
          id: row.siXingId
        }, `InspectionRecords_${new Date().getTime()}.xml`)
      }
    },
    handleChange(val) {
      this.form['code'] =  undefined;
      getdetectionSchemeList({
        state: "1",
        phase: "1",
        categoryId: val.id,
      }).then(res => {
        if (res.rows.length > 0) {
          this.sxjcList = res.rows
        } else {
          this.sxjcList = [];
          this.$message({ message: '当前门类数据还没有四性检测方案数据', type: 'warning' })
        }
      })
    },
    handleYes() {
      
      
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$modal.loading("检测中...")
          saveArchive(this.form).then(res=>{
            if (res.data.code == 500) {
              this.planOpen = true
              getRecordsDetail({pId: res.data.sxId}).then(response => {
                var treeData = response.data
                this.info = {
                  id: res.data.sxId
                }
                this.$nextTick(() => {
                  this.$refs.planRef.init(treeData, this.info)
                })
              })
              this.$modal.closeLoading();
            } else {
              this.$modal.closeLoading();
              this.closeDelDialog()
            }
          })
        }
      })
    },
    reset(){
      this.form = {
        categoryId: undefined,
        code: undefined
      }
    },
    closeDelDialog() {
      this.handoverOpen = false
      this.importOpen = false
      this.dialogVisible = false
      this.planOpen = false
      this.printSXJCOpen=false;
      this.reset()
      this.resetForm('form')
      this.getList()
    }
  }
}
</script>

<style scoped>

</style>
